<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const router = useRouter()
const departments = ref([])
const doctors = ref([])
const selectedDept = ref(null)
const loading = ref(false)

// 获取科室列表
async function fetchDepartments() {
  try {
    const { data } = await request.get('/api/departments/')
    if (data && data.code === 0) {
      departments.value = data.data
    }
  } catch (error) {
    console.error('获取科室列表失败:', error)
    ElMessage.error('获取科室列表失败')
  }
}

// 根据科室获取医生
async function fetchDoctorsByDept(departmentId) {
  loading.value = true
  try {
    const { data } = await request.get(`/api/departments/${departmentId}/doctors/`)
    if (data && data.code === 0) {
      doctors.value = data.data.doctors
      selectedDept.value = data.data.department
    }
  } catch (error) {
    console.error('获取医生列表失败:', error)
    ElMessage.error('获取医生列表失败')
  } finally {
    loading.value = false
  }
}

// 初始化获取科室列表
onMounted(() => {
  fetchDepartments()
})
</script>

<template>
  <div class="appointment-page">
    <h2>预约挂号</h2>
    
    <!-- 科室选择 -->
    <div class="department-section">
      <h3>选择科室</h3>
      <div class="department-list">
        <div 
          v-for="dept in departments" 
          :key="dept.id"
          class="department-item"
          :class="{ 'active': selectedDept?.id === dept.id }"
          @click="fetchDoctorsByDept(dept.id)"
        >
          {{ dept.name }}
        </div>
      </div>
    </div>
    
    <!-- 医生列表 -->
    <div class="doctor-section" v-if="selectedDept">
      <h3>{{ selectedDept.name }} 医生列表</h3>
      <div class="doctor-list" v-loading="loading">
        <div v-for="doctor in doctors" :key="doctor.id" class="doctor-item">
          <div class="doctor-info">
            <h4>{{ doctor.name }}</h4>
            <p>{{ doctor.title }}</p>
            <p>{{ doctor.specialty }}</p>
          </div>
          <button class="appointment-btn" @click="router.push(`/appointment/${doctor.id}`)">
            预约
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.appointment-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.department-section {
  margin-bottom: 30px;
}

.department-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.department-item {
  padding: 10px 15px;
  background: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.department-item:hover {
  background: #e1e5eb;
}

.department-item.active {
  background: #409eff;
  color: white;
}

.doctor-section {
  margin-top: 20px;
}

.doctor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.doctor-item {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doctor-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.doctor-info p {
  margin: 5px 0;
  color: #909399;
  font-size: 14px;
}

.appointment-btn {
  padding: 8px 15px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.appointment-btn:hover {
  background: #66b1ff;
}
</style>